<template>
  <sketch-rule
    v-if="state.flowDesign.openRule"
    :thick="thick"
    :scale="scale"
    :width="canvasBox().width"
    :height="canvasBox().height"
    :shadow="shadow"
    :startX="startX"
    :startY="startY"
    :lines="lines"
  ></sketch-rule>
</template>

<script setup lang="ts">
import {ref, computed, inject} from 'vue'
import {SketchRule} from 'vue3-sketch-ruler'
import 'vue3-sketch-ruler/lib/style.css'

const state: any = inject<any>('state')

// x轴标尺开始的坐标数值
const startX = ref(0)
// y轴标尺开始的坐标数值
const startY = ref(0)
// 标尺的厚度
const thick = ref(20)
// 初始化水平标尺上的参考线
const lines = {
  h: [],
  v: []
}

const canvasBox = () => {
  const layoutDom:any = document.getElementById('main')
  if (layoutDom) {
    return {
      height: layoutDom.clientHeight ,
      width: layoutDom.clientWidth
    }
  }
  return {
    width: 1000,
    height: 600
  }
}

const shadow = computed(() => {
  return {
    x: 0,
    y: 0,
    width: canvasBox().width,
    height: canvasBox().height
  }
})

const scale = computed(() => {
  return 1
})

</script>

